function jp(id){
	var object=new Object();
	object.element_id=id;
	object.element=document.getElementById(id);
	object.dragAble=function(_params){
		object.params=new Object();
		object.mup=_params.mup?_params.mup:false;
		object.initScreen=_params.initScreen?_params.initScreen:false;
		object.history=[];
		object.now=[];
		object.curstatus=false;
		object.redo=_params.redo?document.getElementById(_params.redo):false;
		object.undo=_params.undo?document.getElementById(_params.undo):false;
		object.params.picVisualArea=_params.picVisualArea?_params.picVisualArea:"picVisualArea";
		object.params.mainImage=_params.mainImage?_params.mainImage:"mainImage";
		object.params.dragAble=_params.dragAble?_params.dragAble:"dragAble";
		object.params.focusObject=_params.focusObject?_params.focusObject:"jppicfocus";
		object.element.style.position="relative";
		object.element.style.overflow="hidden";
		object.childNodes=object.element.getElementsByTagName("*");
		object.ismobiel=false;
		object.screen=getScreen();
		if(object.initScreen){
			object.initScreen(object.screen);
		}
		object.jphol=_params.jphol?getByClass(_params.jphol):false;
		if(object.jphol){
			object.jphol.onclick=jpholClick;
		}
		object.jphor=_params.jphor?getByClass(_params.jphor):false;
		if(object.jphor){
			object.jphor.onclick=jphorClick;
		}
		object.picthumbcontent=_params.picthumbcontent?getByClass(_params.picthumbcontent):getByClass("picthumbcontent");
		object.drags=getDragObject();
		object.mainImage=getMainImage();
		object.screen.style.position="relative";
		object.screen.style.overflow="hidden";
		document.onclick=dragClick;
		document.addEventListener("touchstart",initDrag,false);
		document.onmousedown = initDrag;
		document.onmouseup=mouseup;
		document.addEventListener("touchend",mouseup,false);
		object.jptransform=0;
		object.redo?object.redo.onclick=redoClick:"";
		object.undo?object.undo.onclick=undoClick:"";
		initTumbPic();
		
	}
	function jpholClick(){
		if(object.picthumbcontent){
			var child=object.picthumbcontent.childNodes[1];
			var node1=child.childNodes[1];
			var nc=child.getElementsByTagName("li").length;
			var w=node1.offsetWidth+4;
			var tmp=object.jptransform+(-w);
			if(tmp>=(nc-1)*(-w)){
				object.jptransform=tmp;
				child.style.transform="translate3d("+object.jptransform+"px, 0px, 0px)";
			}
		}
		
		
		
		
	}
	function initTumbPic(){
		var child=object.picthumbcontent.childNodes[1];
		var lilist=child.getElementsByTagName("li");
		for(var i in lilist){
			lilist[i].onclick=liClick;
		}
	}
	function liClick(e){
		var src = e.target ? e.target : event.srcElement;
		object.mainImage.src=src.src;
		listremoveClass(src.parentNode.parentNode.getElementsByTagName("li"),"cur");
		addClass(src.parentNode,"cur");
	
	}
	function addClass(obj,className){
		obj.className+=obj.className+" "+className;
	}
	function listremoveClass(list,className){
		if(list.length>1){
			for(var i in list){
				removeClass(list[i],className);
			}
		}
	}
	function removeClass(obj,className){
		if(obj.className){
			var classlist=obj.className.split(" ");
			var rs="";
			for(var i in classlist){
				if(classlist[i]==className){
					continue;
				}else{
					rs+=classlist[i]+" ";
				}
			}
			obj.className=rs;
		}
		
		return obj;
	}
	function jphorClick(){
		if(object.picthumbcontent){
			var child=object.picthumbcontent.childNodes[1];
			var node1=child.childNodes[1];
			var w=node1.offsetWidth+4;
			var tmp=object.jptransform+w;
			if(tmp<=0){
				object.jptransform=tmp;
				child.style.transform="translate3d("+object.jptransform+"px, 0px, 0px)";
			}
		}
		
		
	}
	function redoClick(){
		var tmp=object.now.pop();
		if(object.curstatus&&tmp){
			object.history.push(object.curstatus);
		}
		if(tmp){
			object.curstatus=tmp;
		}
		var n=object.curstatus;
		if(n){
			object.cur.style.top=n.cur_top;
			object.cur.style.left=n.cur_left;
			object.cur.style.right=n.cur_right;
			object.cur.style.bottom=n.cur_bottom;
			object.cur.style.height=n.cur_height+"px";
			object.cur.style.width=n.cur_width+"px";
		}
		
		
	}
	function undoClick(){
		var tmp=object.history.pop();
		if(object.curstatus&&tmp){
			object.now.push(object.curstatus);
		}
		if(tmp){
			object.curstatus=tmp;
		}
		
		var n=object.curstatus;
		if(n){
				object.cur.style.top=n.cur_top;
				object.cur.style.left=n.cur_left;
				object.cur.style.right=n.cur_right;
				object.cur.style.bottom=n.cur_bottom;
				object.cur.style.height=n.cur_height+"px";
				object.cur.style.width=n.cur_width+"px";
		}
	}
	function getByClass(className){
		var rs=[];
		var all=document.getElementsByTagName("*");
		for(var i=0;i<all.length;i++){
			var tmp=all[i].className;
			var tarr=(tmp.split(" "));
			for(var j in tarr){
				if(tarr[j]==className){
					rs.push(all[i]);
					break;
				}
				
			}
			
		}
		if(rs.length>1){
			return rs;
		}else{
			return rs[0];
		}
	}
	function getDragObject(){
		var arr=new Array();
		for(var i=0;i<object.childNodes.length;i++){
				if(object.childNodes[i].className==object.params.dragAble){
					object.childNodes[i].style.position="absolute";
					object.childNodes[i].style.cursor="move";
					arr.push(object.childNodes[i]);
				}
		}
		return arr;
	}
	function finish(){
		for(var i in object.drags){
			object.drags[i].info={
				x:object.drags[i].offsetLeft,
				y:object.drags[i].offsetTop,
				w:object.drags[i].clientWidth,
				h:object.drags[i].clientHeight,
				sx:(object.drags[i].offsetLeft+object.screen.offsetLeft),
				sy:(object.drags[i].offsetTop+object.screen.offsetTop),
				mainImage:object.mainImage
				};
		}
	}
	function getScreen(){
		for(var i=0;i<object.childNodes.length;i++){
			if(object.childNodes[i].className==object.params.picVisualArea){
				return object.childNodes[i];
			}
		}
	}
	function getMainImage(){
		for(var i=0;i<object.childNodes.length;i++){
			if(object.childNodes[i].className==object.params.mainImage){
				return object.childNodes[i];
			}
		}
	}
	function initDrag(e) {
            var oDragHandle = e.target ? e.target : event.srcElement;
			e=e.touches?e.touches[0]:e;
			
			object.y=(e.clientY?e.clientY:event.clientY);
			object.x=(e.clientX?e.clientX:event.clientX);
            if (oDragHandle.className == object.params.dragAble) {
                object.isdrag = true;
				object.cur=oDragHandle;
				object.bi=(object.cur.width/object.cur.height).toFixed(2);
				object.cur.style.zIndex=3;
				object.nTY=isNaN(parseInt(oDragHandle.offsetTop+ 0))?0:parseInt(oDragHandle.offsetTop + 0);
				object.nTX=isNaN(parseInt(oDragHandle.offsetLeft+ 0))?0:parseInt(oDragHandle.offsetLeft+ 0);
				showFocus(e);
				document.addEventListener("touchmove",moveMouse,false);
                document.onmousemove = moveMouse;
          
            }else if(oDragHandle.className==object.params.picVisualArea||oDragHandle.id =="jpf1"||oDragHandle.id =="jpf2"||oDragHandle.id =="jpf3"||oDragHandle.id =="jpf4"||oDragHandle.id =="jpf5"||oDragHandle.id =="jpf6"||oDragHandle.id =="jpf7"||oDragHandle.id =="jpf8"){
				object.isscale = true;
				object.curscale=oDragHandle;
				
			}
		
			if(object.cur&&(object.isdrag||object.isscale)){
					var his=object.now.pop();
					if(!his){
						his={
						cur_top:object.cur.style.top!=""?object.cur.style.top:"0px",
						cur_left:object.cur.style.left?object.cur.style.left:"0px",
						cur_right:object.cur.style.right?object.cur.style.right:"0px",
						cur_bottom:object.cur.style.bottom?object.cur.style.bottom:"0px",
						cur_height:object.cur.clientHeight,
						cur_width:object.cur.clientWidth
						};
					}
					if(object.history.length>10){
						object.history.splice(0,1);
					}
					object.history.push(his);
				
				
				}
				return false;
        }
		function moveMouse(e){
			var oe=e;
			object.ismobiel=e.touches?true:false;
			e=object.ismobiel?e.touches[0]:e;
			
			var elementPos=getDivPosition();
			if(object.isdrag&&e.clientX>elementPos.xLeft&&e.clientX<elementPos.xRigh&&e.clientY>elementPos.yTop&&e.clientY<elementPos.yBottom){
				showFocus(e);
				//console.log(object.nTY);
				//console.log(object.cur.style.top+"###"+e.clientY?e.clientY-object.y+object.nTY:event.clientY-object.y+object.nTY);
				object.cur.style.right="auto";
				object.cur.style.bottom="auto";
				object.cur.style.top = (e.clientY?e.clientY-object.y+object.nTY:event.clientY-object.y+object.nTY) + "px";
                object.cur.style.left = (e.clientX?e.clientX+object.nTX-object.x:event.clientX+object.nTX-object.x) + "px";
                object.jppicfocus.jpf5=(document.getElementById("jpf5").offsetLeft+object.jppicfocus.offsetLeft);
				object.jppicfocus.jpf7=(document.getElementById("jpf7").offsetTop+object.jppicfocus.offsetTop);
				return false;
			}
			if(object.isscale&&e.clientX>elementPos.xLeft&&e.clientX<elementPos.xRigh&&e.clientY>elementPos.yTop&&e.clientY<elementPos.yBottom){
			    
				if(object.ismobiel){
					//console.log("x1:"+oe.touches[0].clientX+",y1:"+oe.touches[0].clientY+"x2:"+oe.touches[1].clientX+",y2:"+oe.touches[1].clientY);//console.log();
					if(oe.touches[1]&&oe.touches[0]){
						var x=parseInt(Math.abs(oe.touches[1].clientX-oe.touches[0].clientX));
						var y=parseInt(Math.abs(oe.touches[1].clientY-oe.touches[0].clientY));
						//console.log("x:"+x+"#####y:"+y+"######");
						//console.log(object.jppicfocus.pos);
						//console.log("#############################################");
						var w=0;
						var h=0;
						if(x>=y){
							w=x;
							var bi=(object.bi?object.bi:1);
							h=parseInt(x/bi);
							
							//console.log("w:"+w+",h:"+h+",left:"+l+",top:"+t);
							//console.log("#############################################");
							
						}else{
							h=y;
							w=parseInt(y*bi);
							
						}
						var l=parseInt((object.jppicfocus.pos.left+object.jppicfocus.pos.w/2)-x/2);
						var t=parseInt((object.jppicfocus.pos.top+object.jppicfocus.pos.h/2)-h/2);
						object.jppicfocus.style.left=l+"px";
						object.jppicfocus.style.top=t+"px";
						object.jppicfocus.style.bottom="";
						object.jppicfocus.style.right="";
						object.jppicfocus.style.width=w+"px";
						object.jppicfocus.style.height=h+"px";
					}
					
					
				}else{
					var x=(e.clientX?e.clientX-object.x:event.clientX-object.x);
					var y=(e.clientY?e.clientY-object.y:event.clientY-object.y);
					
					switch(object.curscale.id){
						case "jpf2":
						y=-y;
						object.jppicfocus.style.left=object.jppicfocus.pos.left+"px";
						object.jppicfocus.style.top="auto";
						object.jppicfocus.style.bottom=object.jppicfocus.pos.bottom+"px";
						object.jppicfocus.style.right="auto";
						break;
						case "jpf1":
						y=-y;
						x=-x;
						object.jppicfocus.style.left="auto";
						object.jppicfocus.style.top="auto";
						object.jppicfocus.style.bottom=object.jppicfocus.pos.bottom+"px";
						object.jppicfocus.style.right=object.jppicfocus.pos.right+"px";
						//object.cur.style.left=(object.cur.offsetLeft-changeLiang(x,y).cw)+"px";
						//object.cur.style.top=(object.cur.offsetTop-changeLiang(x,y).ch)+"px";
						
						break;
						case "jpf4":
						x=-x;
						object.jppicfocus.style.left="auto";
						object.jppicfocus.style.top=object.jppicfocus.pos.top+"px";
						object.jppicfocus.style.bottom="auto";
						object.jppicfocus.style.right=object.jppicfocus.pos.right+"px";
						break;
						case "jpf5":
						y=-y;
						x=0;
						var _l=parseInt(object.jppicfocus.jpf5-object.jppicfocus.offsetWidth/2);
						object.jppicfocus.style.left=_l+"px";
						object.jppicfocus.style.top="auto";
						object.jppicfocus.style.bottom=object.jppicfocus.pos.bottom+"px";
						object.jppicfocus.style.right="auto";
						break;
						case "jpf6":
						x=0;
						var _l=parseInt(object.jppicfocus.jpf5-object.jppicfocus.offsetWidth/2);
						object.jppicfocus.style.left=_l+"px";
						object.jppicfocus.style.top=object.jppicfocus.pos.top+"px";
						object.jppicfocus.style.bottom="auto";
						object.jppicfocus.style.right="auto";
						break;
						
						case "jpf7":
						y=0;
						x=-x;
						var _t=parseInt(object.jppicfocus.jpf7-object.jppicfocus.offsetHeight/2);
						object.jppicfocus.style.left="auto";
						object.jppicfocus.style.top=_t+"px";
						object.jppicfocus.style.bottom="auto";
						object.jppicfocus.style.right=object.jppicfocus.pos.right+"px";
						break;
						
						case "jpf8":
						y=0;
						var _t=parseInt(object.jppicfocus.jpf7-object.jppicfocus.offsetHeight/2);
						object.jppicfocus.style.left=object.jppicfocus.pos.left+"px";
						object.jppicfocus.style.top=_t+"px";
						object.jppicfocus.style.bottom="auto";
						object.jppicfocus.style.right="auto";
						break;
					}
					//console.log(changeLiang(x,y).w);
					var _shape=changeLiang(x,y);
					object.jppicfocus.style.width=_shape.w+"px";
					object.jppicfocus.style.height=_shape.h+"px";
				
					object.y=(e.clientY?e.clientY:event.clientY);
					object.x=(e.clientX?e.clientX:event.clientX);
				}
				
                return false;
			}
			
		}
		function changeLiang(x,y){
			var bi=(object.bi?object.bi:1);
			var obj=new Object();
			
			if(Math.abs(x)>=Math.abs(y)){
			
					obj.w=parseInt(object.jppicfocus.style.width)+parseInt(x);
					//console.log("x:"+x+"########width:"+object.jppicfocus.style.width+"######offsetWidth:"+object.jppicfocus.offsetWidth+"#####obj.w:"+obj.w);
					obj.cw=x;
					obj.h=parseInt(bi>0?parseInt(object.jppicfocus.style.width)/bi:parseInt(object.jppicfocus.style.height));
					obj.ch=parseInt(obj.h-parseInt(object.jppicfocus.style.height));
			}else{
					obj.h=parseInt(object.jppicfocus.style.height)+y;
					obj.ch=y;
					obj.w=parseInt(parseInt(object.jppicfocus.style.height)*bi);
					obj.cw=parseInt(obj.w-parseInt(object.jppicfocus.style.width));
			}
			return obj;
				
		}
		function mouseup(e){
		    if(object.jppicfocus&&object.isscale){
				var h=object.jppicfocus.clientHeight;
				var w=object.jppicfocus.clientWidth;
				if(object.ismobiel){
					object.cur.style.top=(parseInt(object.jppicfocus.style.top)+1)+"px";
					object.cur.style.left=(parseInt(object.jppicfocus.style.left)+1)+"px";
				}else{
					object.cur.style.top=object.jppicfocus.style.top;
					object.cur.style.left=object.jppicfocus.style.left;
				}
				
				object.cur.style.right=object.jppicfocus.style.right;
				object.cur.style.bottom=object.jppicfocus.style.bottom;
				object.cur.style.height=(h-2)+"px";
				object.cur.style.width=(w-2)+"px";
				//object.jppicfocus.style.top="";
				//object.jppicfocus.style.left="";
				//object.jppicfocus.style.right="";
				//object.jppicfocus.style.bottom="";
				//console.log("w:"+w+"####h:"+h);
			}
			if(object.cur&&(object.isdrag||object.isscale)){
				object.cur.style.zIndex=2;
				var n={
					cur_top:object.cur.style.top,
					cur_left:object.cur.style.left,
					cur_right:object.cur.style.right,
					cur_bottom:object.cur.style.bottom,
					cur_height:object.cur.clientHeight,
					cur_width:object.cur.clientWidth
				};
				object.now.push(n);
				//console.log(object.now);
			}
			
			object.isdrag = false;
			object.isscale = false;
		
	
			//console.log(object.history);
			//console.log(object.now);
			finish();
			object.mup?object.mup(object.drags):"";
		}
		
		function getDivPosition()
           {
           var xLeft,xRigh,yTop,yBottom;
           return {
                xLeft:object.element.getBoundingClientRect().left,
                xRigh:object.element.getBoundingClientRect().right, 
                yTop:object.element.getBoundingClientRect().top,
                yBottom:object.element.getBoundingClientRect().bottom
                };
           }
		
	function dragClick(e){
		showFocus(e);
	}
	function showFocus(e){
		if(object.cur){
			var clickobject = object.cur;
			object.jppicfocus=getFocusObject();
			if(clickobject.className == object.params.dragAble){
				var pos=getDragObjectPosition();
				object.jppicfocus.style.position="absolute";
				object.jppicfocus.style.zIndex=1;
				object.jppicfocus.style.display="block";
				object.jppicfocus.style.width=(pos.xRigh-pos.xLeft)+"px";
				var _t=(pos.yoffsetTop-1);
				var _l=(pos.xoffsetLeft-1);
		
				object.jppicfocus.style.left=_l+"px";
				object.jppicfocus.style.height=(pos.yBottom-pos.yTop)+"px";
				object.jppicfocus.style.top=_t+"px";
				object.jppicfocus.style.border="1px dashed black";
				
				var _r=object.screen.clientWidth-(_l+parseInt(object.jppicfocus.clientWidth));
				var _b=object.screen.clientHeight-(_t+parseInt(object.jppicfocus.clientHeight));
				object.jppicfocus.pos={left:_l,right:_r,top:_t,bottom:_b,w:pos.xRigh-pos.xLeft,h:pos.yBottom-pos.yTop};
			}else{
				object.jppicfocus.style.display="none";
			}
		}
	}
	function getFocusObject(){
		for(var i=0;i<object.childNodes.length;i++){
			if(object.childNodes[i].id==object.params.focusObject){
				return object.childNodes[i];
			}
		}
		var focus=document.createElement("div");
		var f1=document.createElement("div");
		var f2=document.createElement("div");
		var f3=document.createElement("div");
		var f4=document.createElement("div");
		var f5=document.createElement("div");
		var f6=document.createElement("div");
		var f7=document.createElement("div");
		var f8=document.createElement("div");
		var pos=getDragObjectPosition();
		f1.style.background="#888";
		f1.style.width="9px";
		f1.style.height="9px";
		f1.style.position="absolute";
		f1.style.left=(pos.xoffsetLeft-11)+"px";
		f1.style.top=(pos.yoffsetTop-11)+"px";
		f1.style.border="1px solid white";
		f1.style.cursor="se-resize";
		f1.style.zIndex=10;
		f1.id="jpf1";

		f2.style.background="#888";
		f2.style.width="9px";
		f2.style.height="9px";
		f2.style.position="absolute";
		f2.style.right=(-11)+"px";
		f2.style.top=(pos.yoffsetTop-11)+"px";
		f2.style.border="1px solid white";
		f2.style.cursor="nesw-resize";
		f2.style.zIndex=10;
		f2.id="jpf2";

		f3.style.background="#888";
		f3.style.width="9px";
		f3.style.height="9px";
		f3.style.position="absolute";
		f3.style.right=(-11)+"px";
		f3.style.bottom=(-11)+"px";
		f3.style.border="1px solid white";
		f3.style.cursor="se-resize";
		f3.style.zIndex=10;
		f3.id="jpf3";
		
		f4.style.background="#888";
		f4.style.width="9px";
		f4.style.height="9px";
		f4.style.position="absolute";
		f4.style.left=(pos.xoffsetLeft-11)+"px";
		f4.style.bottom=(-11)+"px";
		f4.style.border="1px solid white";
		f4.style.cursor="nesw-resize";
		f4.style.zIndex=10;
		f4.id="jpf4";
		
		
		
		f5.style.background="#888";
		f5.style.width="9px";
		f5.style.height="9px";
		f5.style.position="absolute";
		f5.style.left="50%";
		f5.style.marginLeft="-4.5px";
		f5.style.top=(pos.yoffsetTop-11)+"px";
		f5.style.border="1px solid white";
		f5.style.cursor="ns-resize";
		f5.style.zIndex=10;
		f5.id="jpf5";
		
		f6.style.background="#888";
		f6.style.width="9px";
		f6.style.height="9px";
		f6.style.position="absolute";
		f6.style.left="50%";
		f6.style.marginLeft="-4.5px";
		f6.style.bottom=(-11)+"px";
		f6.style.border="1px solid white";
		f6.style.cursor="ns-resize";
		f6.style.zIndex=10;
		f6.id="jpf6";
		
		
		f7.style.background="#888";
		f7.style.width="9px";
		f7.style.height="9px";
		f7.style.position="absolute";
		f7.style.left=(pos.xoffsetLeft-11)+"px";
		f7.style.top="50%";
		f7.style.marginTop="-4.5px";
		f7.style.border="1px solid white";
		f7.style.cursor="ew-resize";
		f7.style.zIndex=10;
		f7.id="jpf7";
		
		
		f8.style.background="#888";
		f8.style.width="9px";
		f8.style.height="9px";
		f8.style.position="absolute";
		f8.style.right=(-11)+"px";
		f8.style.top="50%";
		f8.style.marginTop="-4.5px";
		f8.style.border="1px solid white";
		f8.style.cursor="ew-resize";
		f8.style.zIndex=10;
		f8.id="jpf8";
		
		focus.appendChild(f1);
		focus.appendChild(f2);
		focus.appendChild(f3);
		focus.appendChild(f4);
		focus.appendChild(f5);
		focus.appendChild(f6);
		focus.appendChild(f7);
		focus.appendChild(f8);
		focus.id=object.params.focusObject;
		object.screen.appendChild(focus);
		
		return focus;
	}
	function getDragObjectPosition(){
	  var xLeft,xRigh,yTop,yBottom;
           return {
                xLeft:(object.cur?object.cur.getBoundingClientRect().left:0),
                xRigh:object.cur?object.cur.getBoundingClientRect().right:0, 
                yTop:object.cur?object.cur.getBoundingClientRect().top:0,
                yBottom:object.cur?object.cur.getBoundingClientRect().bottom:0,
				xoffsetLeft:object.cur?object.cur.offsetLeft:0,
				yoffsetTop:object.cur?object.cur.offsetTop:0
                };
	}
	return object;
 }